<template>
  <div class="product">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- /details/${details}路由先转的联机 -->
        <router-link :to="``">
          <van-cell v-for="item in datalist" :key="item.id">
            <img v-lazy="item.name" alt="" class="ig" />
            <span class="user">{{ item.user_name }}</span>
            <div class="prc">
              <span>{{ item.title }}</span>
              <img v-lazy="item.image" alt="" />
            </div>
          </van-cell>
        </router-link>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
    data(){
      return{
      datalist: [],
      refreshing: false,
      loading: false,
      finished: false,
      current: 1, //记录第几页
      total: 0, //记录全部的数据
      }
    },
    props:["searc"],
    methods:{
       onLoad(cid,current) {
      /**
       * 1.axios请求页面
       * 2.合并新数据到老数据下面
       * 3.让this.loading=false
       * 4.判断请求到的所有，数据是否等于总数，停止加载，给this.finished=true
       */
      let object = {
        cid: cid,
        current:current
      };
      // if(this.data.results.length===this.total){
      //   this.finished=true;
      //   return;
      // }
      this.current++;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.axios.get("/index", this.qs.stringify(object)).then((res) => {
          let data = res.data.results;
          data.forEach((item) => {
            item.name=require("../assets/portrait/" + item.image);//用户头像
            item.image = require("../assets/image/" + item.user_portrait);//菜谱图片
            this.datalist.push(item);
          });
        });
        if (this.refreshing) {
          this.datalist = []; //清空数据
          this.refreshing = false; //停止加载
        }
        //  for (let i = 0; i < 10; i++) {
        //   this.list.push(this.list.length + 1);
        // }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.datalist.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    }
};
</script>
<style scoped>
.product{
  widows: 100%;
  height: 100%;
}
.van-cell{
  position: absolute;
}
.today{
  margin: 20px;
  font-size: 20px;
  font-family: "微软雅黑";
  text-align: center;
  color: #3d2222;
  font-weight:bold;
}
.ig{
  width: 60px;
  height: 60px;
}
.user{
  position: relative;
  margin: 20px;
  top: -30px;
  font-size: 16px;
}
.prc span{
  margin: 10px 10px;
  font-size: 20px;
}
.prc img{
  position: relative;
  top: 10px;
  border-radius: 15px;
  width: 100%;
}
</style>